<!--
 * @Author: Hunter
 * @Date: 2022-02-28 16:19:05
 * @LastEditTime: 2022-03-01 09:54:47
 * @LastEditors: Hunter
 * @Description: 
 * @FilePath: \book-mark-client\src\components\search\index.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div>
    <el-input
      size="large"
      v-model="inputVal"
      placeholder="请输入关键字进行过滤"
      class="input-with-select"
      clearable
      @clear="clearHandler"
    >
      <template #append>
        <el-button @click="searchHandler">搜索</el-button>
      </template>
    </el-input>
  </div>
</template>

<script lang="ts">
export default {
  props: ["setKeyword"],
  data() {
    return {
      inputVal: "",
    };
  },
  methods: {
    searchHandler() {
      this.setKeyword(this.inputVal);
    },
    clearHandler() {
      this.setKeyword(this.inputVal);
    },
  },
};
</script>

<style scoped>
</style>